<template>
	<view>
		<view class="cardbox">
			<view class="cards">
				<view class="leftbox">
					<view class="yue">
						余额
					</view>
					<view class="moneys">
						9999.99
					</view>
				</view>
				<view class="txbox" @click="totixian">
					提现
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: windowHeight }" @scrolltolower="onreachBottom1">
			<view class="cenbox">
				<text>收益明细</text>
				<view class="itembox" v-for="(item,index) in 18" :key="index">
					<view class="leftbox">
						<view class="toptxt">
							提现至微信
						</view>
						<view class="timetxt">
							2024-06-06 12:00
						</view>
					</view>
					<view class="moneys">
						-999
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data( ) {
			return {
				windowHeight: 0
			};
		},
		onLoad( ) {
			var _this = this
			uni.getSystemInfo( {
				success: function( res ) {
					console.log( res.windowHeight, 'sssssssss' );
					_this.windowHeight = res.windowHeight - 133 + 'px';
					console.log( _this.windowHeight, '_this.windowHeight ' );
				}
			} )
		},
		methods: {
			totixian() {
				uni.navigateTo({
					url:'/pages/Personal/tixian/tixian'
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.cardbox {
		width: 100%;
		height: 244rpx;
		background-color: #F5F5F5;

		.cards {
			width: 690rpx;
			height: 182rpx;
			background: linear-gradient(310deg, #276DF4 0%, #75A2FF 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 22rpx auto;
			padding: 30rpx 42rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.leftbox {
				width: 400rpx;
				height: 132rpx;

				.yue {
					width: 60rpx;
					height: 44rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: left;
				}

				.moneys {
					width: 100%;
					height: 72rpx;
					font-weight: 400;
					font-size: 48rpx;
					color: #FFFFFF;
					text-align: left;
					margin-top: 6rpx;
				}
			}

			.txbox {
				width: 166rpx;
				height: 62rpx;
				background: #FFFFFF;
				border-radius: 31rpx 31rpx 31rpx 31rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				line-height: 62rpx;
			}
		}
	}
	
	.cenbox{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		padding: 50rpx 38rpx 50rpx 30rpx;
		box-sizing: border-box;
		
		text{
			height: 44rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			text-align: left;
		}
		.itembox{
			width: 100%;
			height: 130rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.leftbox{
				width: 60%;
				height: 100%;
				padding-top: 18rpx;
				box-sizing: border-box;
				
				.toptxt{
					width: 100%;
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					text-align: left;
					margin-bottom: 14rpx;
				}
				
				.timetxt{
					width: 100%;
					height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					text-align: left;
				}
			}
			
			.moneys{
				width: 40%;
				height: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				text-align: right;
			}
		}
	}
</style>